<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${sessionScope.user.name }的购物车</title>
    <base href="${pageContext.request.contextPath }/">
    <link rel="stylesheet" type="text/css" href="css/common/commonutils.css">
    <link rel="stylesheet" type="text/css" href="css/index/head.css">
    <link rel="stylesheet" type="text/css" href="css/index/foot.css">
    <link rel="stylesheet" href="css/shopping/shopping.css">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head> 
<body>
    <!-- 购物车页面 -->
    <!-- 头部内容 -->
     <div id="head">
        <!-- 最上方的导航栏 -->
        <div id="navigation">
            <ul>
                <c:if test="${empty sessionScope.user }">
                	<li style="margin-right: 30px;">您好，请先登录~</li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">              
                	<li style="margin-right: 30px;">欢迎您，${sessionScope.user.name }</li>
                </c:if>
                <li>当前所在地：地球村</li>
            </ul>
            
            <ul>
                <li>
                    <i id="shoping_cart_logo"></i>
                    <a href="shoppingcart">购物车</a>
                    <b class="shoping_cart_num">${sessionScope.shoppingNum}</b>
                </li>
                <li>|</li>
                <li><a href="orders">我的订单</a></li>
                <li>|</li>
                <li id="my_home"><a href="">我的钱包</a><i>您的余额:${sessionScope.user.balance }</i></li>
                <li>|</li>
                <c:if test="${empty sessionScope.user }">
                	<li><a href="login">登录</a></li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">
                	<li><a href="exit">注销</a></li>
                </c:if>
                <li>|</li>
                <li><a href="register">注册</a></li>
            </ul>
        </div>
    </div>
    <!-- 显示logo和当前进度 -->
    <div id="logo_and_progress">
        <a href=""><img src="images/logo.png" alt=""></a>
            <span  class="active">我的购物车</span>
            <span >填写订单</span>
            <span >完成订单</span>        
    </div>
    <!-- 画条分割线 -->
    <div id="line"></div>
    
    <!-- 放所有订单:默认购物车进度 -->
    <div id="shop_content">
        <div id="shop_adress">配送地址：<span>地球村</span></div>
        <div id="shop_cart">
            <ul>
                <li>
                    <input type="checkbox" />
                    	全选
                </li>
                <li>商品信息</li>
                <li>单价（元）</li>
                <li>数量</li>
                <li>金额（元）</li>
                <li>操作</li>
            </ul>
            <div id="shop_items">
            	<c:forEach items="${requestScope.shoppings }" var="shopping">
                <div class="shop_item" index="${shopping.book.id }">
                    <input type="checkbox" />
                    <img src="${shopping.book.image }" >       
                    <a href="book/${shopping.book.id }" class="item_title">${shopping.book.title }</a>  
                    <!-- 单价 -->
                    <c:set var="price"><fmt:formatNumber value="${shopping.book.price * shopping.book.discount / 10}" pattern="0.00"></fmt:formatNumber></c:set>
                    <p class="item_price">￥:<span><c:out value="${price }"></c:out></span></p>
                    <div class="item_num">
                        <a href="javascript:void(0)">-</a>
                        <input class="num" type="text" value="${shopping.bookNum }"/>
                        <a href="javascript:void(0)">+</a>
                    </div>  
                    <!-- 总价 -->
                    <p class="item_new_price">￥:<span><fmt:formatNumber value="${price * shopping.bookNum}" pattern="0.00"></fmt:formatNumber></span></p>  
                    <a class="item_to_delete" href="javascript:void(0)">删除</a>
                </div> 
            	</c:forEach>
            </div>
        </div>
        <!-- 结算，进入提交订单 -->
        <div id="shop_to_submit">            
            <input id="select_shopping_item" type="checkbox"/>
            全选           
            <a href="javascript:void(0)">批量删除</a>
            <a href="javascript:void(0)">清除下架商品</a>
            <span>已选择<span id="select_num">0</span>件商品</span>
            总计(不含运费):<span>￥:<em id="submit_price">0.00</em></span>
            <button id="submit">结算</button>
        </div>
    </div>

    <!-- 填写订单：第二步 -->
    <!--  -->
    <div id="check_shop" style="display: none;">
        <div id="check_adress">        
            <p>确认收货地址:</p>
            <div>
                <p><span id="name">${sessionScope.user.name }</span><span id="phone">${sessionScope.user.email }</span></p>
                <span>地球村</span>
            </div>
        </div>
        <div id="check_order">      
            <p>确认订单信息</p>
            <table>
                <tbody>
                    <tr id="order_title">
                        <td>&nbsp;</td>                        
                        <td>商品名称</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>总价</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="pay">
            <p>支付方式</p>
            <ul>
                <li><a href="">网上支付</a></li>
            </ul>
        </div>
        <div id="invoice">
            <p>发票</p>
            <input type="checkbox" />需要开发票
        </div>
        <!-- 终于写到这里了。。。哭 -->
        <div id="newsubmit">
            <!-- 左边的地址 -->
            <div>
                <p>寄送至：</p>
                <p>
                    <span>地球村</span>
                    <span><em>${sessionScope.user.name }</em>&nbsp;<em>${sessionScope.user.email }</em></span>
                </p>
            </div>
            <!-- 右边的支付 -->
            <div>
                <p>共<span>6</span>件商品</p>
                <div>
                    <span>
                        	实付：<span>￥<em>97.55</em></span>
                        <span>（含运费<em>0.00</em>元）</span>
                    </span>
                    <span>
                       	 热销订单请在<span>2小时</span>内完成支付
                    </span>
                </div>
                <a id="topay" href="javascript:void(0)">去支付</a>
            </div>
        </div>
    </div>
    
    <!-- 支付完成！！自动跳转 -->
    <div id="backHome" style="display: none;">
    <p>你已经成功完成支付</p>
    <p>还剩<span id="totalSecond">5</span>秒，自动跳转到购物车页</p>
    </div>

     <!-- 尾部 -->
    <div id="footer">Copyright 2020 由小行星个人制作的图书网站</div>
    <script type="text/javascript" src="js/payment/auto_jump.js"></script>
    <script type="text/javascript" src="js/payment/payment_core.js"></script>
</body>
</html>